<template>
    <div class="config-field lh-3">
        <text v-if="field.type == 'text'">{{ finalModel }}</text>
        <!-- 数字 -->
        <el-input-number v-else-if="field.type == 'number'" v-bind="field" v-model="finalModel" @change="valueChanged" />
        <!-- 脚本编辑 -->
        <template v-else-if="field.type == 'script'">
            <el-link type="primary" icon="Edit" @click="editScript">编辑</el-link>
            <div class="mt-2" v-if="field.examples">
                <span>示例：</span>
                <el-link v-for="example in field.examples" type="primary" class="mr-4" @click="selectExample(example)">{{ example.label }}</el-link>
            </div>
        </template>
        <!-- 拾色器 -->
        <el-color-picker v-else-if="field.type == 'colorPicker'" v-model="finalModel" @change="valueChanged" show-alpha />
        <!-- 单选按钮 -->
        <el-radio-group v-else-if="field.type == 'radioGroup'" v-model="finalModel" @change="valueChanged">
            <el-radio-button v-for="item in field.options" :label="item.label" :value="item.value"></el-radio-button>
        </el-radio-group>
        <!-- 图片上传 -->
        <image-uploader v-else-if="field.type == 'imageUploader'" v-model="finalModel" :multiple="field.multiple || false" :limit="field.limit || 1" />
        <!-- 其它情况 -->
        <el-input
            v-else
            v-model="finalModel"
            :type="field.type"
            :rows="field.rows"
            :placeholder="field.placeholder || '请输入' + field.label"
            @change="valueChanged"
        />
        <text v-if="field.unit" class="ml-1 unit">{{ field.unit }}</text>

        <el-dialog v-model="visible" title="脚本编辑">
            <monaco-editor v-model="script" :language="field.lang || 'javascript'" height="600px" />
            <template #footer>
                <el-button icon="Close" @click="visible = false">取消</el-button>
                <el-button icon="Check" type="primary" @click="saveScript">确定</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { computed } from "vue";
import * as _ from "lodash";
import monacoEditor from "@/components/monaco-editor.vue";
import ImageUploader from "@/components/image-uploader.vue";

const { field } = defineProps({
    field: Object,
});
const model = defineModel();
const visible = ref(false);
const finalModel = computed({
    get() {
        let val = _.get(model.value, field.prop);
        if (!val && val != 0) {
            return null;
        }

        if (field.getter) {
            return field.getter(val);
        }

        // 如果是json格式，需要转换
        if (field.type == "script" && field.lang == "json") {
            return JSON.stringify(val);
        }

        if (field.type == "number") {
            return parseFloat(val);
        } else {
            return val;
        }
    },
    set(val) {
        if (field.unit) {
            val = val + field.unit;
        } else if (field.setter) {
            val = field.setter(val);
        } else if (field.type == "script" && field.lang == "json") {
            if (val) {
                val = JSON.parse(val);
            }
        }
        _.set(model.value, field.prop, val);
    },
});
const script = ref();
const emits = defineEmits(["change"]);

function editScript() {
    script.value = finalModel.value;
    visible.value = true;
}

function saveScript() {
    finalModel.value = script.value;
    visible.value = false;
    valueChanged();
}

function selectExample(exp) {
    finalModel.value = exp.value;
}

function valueChanged() {
    emits("change");
}
</script>

<style lang="scss" scoped>
.config-field {
    :deep() {
        .el-upload-list--picture-card {
            --el-upload-list-picture-card-size: 80px;
        }

        .el-upload--picture-card {
            --el-upload-picture-card-size: 80px;
        }
    }
}

.unit {
    color: #aaa;
}
</style>
